﻿<template>
  <div>
    <!-- 标题部分 -->
    <V-Title :titleName = 'titleName'></V-Title>
    <div class = 'page_mainContent' v-loading = 'loading'>
      <!-- 表格部分 -->
      <div class = 'page_tableContent page_treeTable'>
        <el-table :data = 'tableData' style = 'width:100%' stripe border row-key = 'functionno' :header-cell-class-name = 'handlemyclass'>
          <el-table-column :align = "index === 0 ? '' : 'center'" v-for = '(item, index) in tableColumn' :key = 'item.indexName' :label = 'item.text'>
            <template slot-scope = 'scope'>
              <span>{{scope.row[item.indexName]}}</span>
            </template>
          </el-table-column>
          <el-table-column label = "操作" align="center" width = '300px'>
            <template slot-scope="scope">
              <el-button type = 'text' @click = "handleAdd(scope.row)"><i class='iconfont icon-add'></i>添加子菜单</el-button>
              <el-button type = 'text' @click = "handleEdit(scope.row)"><i class='iconfont icon-bianji'></i>编辑</el-button>
              <el-button type = 'text' @click = "handleDelete(scope.row)"><i class='iconfont icon-shanchu'></i>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部按钮和页码部分 -->
      <div class = 'page_bottomContent'>
        <div class = 'page_btnsContent'>
          <el-button type = "primary" @click = 'handleAdd (null)'>添加菜单</el-button>
        </div>
      </div>
    </div>
    <!-- 编辑、添加菜单的弹出框 -->
    <el-dialog v-drag :title = 'dialogTitle' :visible.sync='dialogFormVisible' width = '40%' @close = "closeDialog"
    :close-on-click-modal = 'false'>
      <el-form :model = "ruleForm" ref = "ruleForm" :label-width = 'labelWidth' :rules = 'rules' v-loading = 'formLoading'>
        <!-- 有父级菜单时，可编辑子菜单的编号 -->
        <el-form-item label = "功能编号：" prop = 'son_selfNo' v-if = 'hadParent'>
          <el-row>
            <el-col :span = "11">
              <el-form-item>
                <el-input v-model = "ruleForm.son_parentNo" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col class = "line" :span = "2">-</el-col>
            <el-col :span = "11">
              <el-form-item>
                <el-input :disabled = 'isEdit' v-model = "ruleForm.son_selfNo" placeholder="请输入子功能编号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <!-- 没有父级菜单时 -->
        <el-form-item label = "功能编号：" prop = 'functionNo' v-if = '!hadParent'>
          <el-input v-model = 'ruleForm.functionNo' placeholder = "请输入功能编号" :disabled = 'isEdit'></el-input>
        </el-form-item>
        <el-form-item label = '功能名称：' prop = 'functionName'>
          <el-input v-model = 'ruleForm.functionName' placeholder = "请输入功能名称"></el-input>
        </el-form-item>
        <el-form-item label = '功能链接：'>
          <el-input v-model = 'ruleForm.functionUrl' placeholder = "请输入功能链接"></el-input>
        </el-form-item>
        <el-form-item label = '授权码：'>
          <el-input v-model = 'ruleForm.action' placeholder = "请输入授权码"></el-input>
        </el-form-item>
        <el-form-item label = '排序编号：'>
          <el-input v-model = 'ruleForm.sortnum' placeholder = "请输入排序编号"></el-input>
        </el-form-item>
        <!-- 只有一级菜单才需要输入图标 -->
        <el-form-item label = '图标名称：' v-if = '!hadParent'>
          <el-input v-model = 'ruleForm.icon' placeholder = "请输入图标名称"></el-input>
        </el-form-item>
        <!-- 主要是针对站外的路由 -->
        <el-form-item label = '链接target：'>
          <el-radio-group v-model = "ruleForm.target" :disabled = "ruleForm.urlType === 'Router'">
            <el-radio label = "_blank">新窗口打开</el-radio>
            <el-radio label = "_self">当前窗口打开</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label = "是否展示：">
          <el-radio-group v-model = "ruleForm.functionShow">
            <el-radio label = "展示在菜单栏"></el-radio>
            <el-radio label = "不展示在菜单栏"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label = "功能类型：">
          <el-radio-group v-model = "ruleForm.urlType">
            <el-radio label = "Router">站内路由</el-radio>
            <el-radio label = "URI">外站链接</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class='form_noLeftMargin'>
          <el-button type="info" @click="resetForm ('ruleForm')">取 消</el-button>
          <el-button type="primary" @click="submitForm ('ruleForm', isEdit)">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import VTitle from '@/components/common/MainTitle.vue'
export default {
  data () {
    return {
      titleName: '功能管理',
      tableData: [],
      tableColumn: [
        {
          text: '功能名称',
          indexName: 'functionname'
        },
        {
          text: '功能编号',
          indexName: 'functionno'
        },
        {
          text: '功能链接',
          indexName: 'functionurl'
        },
        {
          text: '访问授权码',
          indexName: 'action'
        },
        {
          text: '排序编号',
          indexName: 'sortnum'
        }
      ],
      dialogTitle: '',
      dialogFormVisible: false,
      hadParent: true,
      ruleForm: {
        son_parentNo: '',
        son_selfNo: '',
        functionNo: '',
        functionName: '',
        functionUrl: '',
        functionShow: '不展示在菜单栏',
        sortnum: '',
        action: '',
        urlType: 'Router',
        icon: '',
        target: '_blank'
      },
      labelWidth: '94px',
      pNo: '',
      fId: '',
      isShow: '',
      isEdit: '',
      rules: {
        functionNo: [
          {required: true, message: '功能编号不能为空', trigger: 'blur'}
        ],
        son_selfNo: [
          {required: true, message: '功能编号不能为空', trigger: 'blur'}
        ],
        functionName: [
          {
            required: true, message: '功能名称不能为空', trigger: 'blur'
          }
        ]
      },
      loading: false,
      formLoading: false
    }
  },
  created () {
    this.getTable()
  },
  methods: {
    // 表头添加一个className
    handlemyclass (row) {
      if (row.column.label === '功能名称') {
        return 'uniqHead'
      }
    },
    // 获取数据
    getTable () {
      this.loading = true
      this.$get('/function').then((data) => {
        if (data.data.result) {
          // 将数据结构转化为树形结构
          this.tableData = this.$toTree(data.data.result, true)
        }
        this.loading = false
      })
    },
    // 新增菜单
    handleAdd (row) {
      this.dialogFormVisible = true
      this.isEdit = false
      this.ruleForm.functionName = ''
      this.ruleForm.functionUrl = ''
      this.ruleForm.action = ''
      this.ruleForm.sortnum = ''
      this.ruleForm.functionShow = '展示在菜单栏'
      this.ruleForm.icon = ''
      this.ruleForm.target = '_self'
      if (row) {
        this.dialogTitle = '添加子菜单'
        this.hadParent = true
        this.ruleForm.son_parentNo = row.functionno
        this.ruleForm.son_selfNo = ''
        this.ruleForm.urlType = row.url_type
      } else {
        this.dialogTitle = '新增功能菜单'
        this.hadParent = false
        this.ruleForm.functionNo = ''
        this.ruleForm.urlType = 'Router'
      }
    },
    // 编辑菜单
    handleEdit (row) {
      this.dialogFormVisible = true
      this.isEdit = true
      this.dialogTitle = '编辑功能菜单'
      this.ruleForm.functionName = row.functionname
      this.ruleForm.functionUrl = row.functionurl
      this.ruleForm.action = row.action
      this.ruleForm.sortnum = row.sortnum
      this.ruleForm.urlType = row.url_type
      this.ruleForm.icon = row.icon
      this.ruleForm.target = row.target
      this.checkParent(row)
      if (row.is_menu) {
        this.ruleForm.functionShow = '展示在菜单栏'
      } else {
        this.ruleForm.functionShow = '不展示在菜单栏'
      }
    },
    // 删除菜单
    handleDelete (row) {
      this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'el-button--info'
      }).then(() => {
        this.formLoading = true
        this.$delete('/function/' + row.functionno).then((data) => {
          if (data.status === 204) {
            this.$message({
              message: '删除成功,请刷新页面,以更新左边菜单',
              type: 'success'
            })
            this.getTable()
          }
          this.formLoading = false
        }).catch((error) => {
          this.formLoading = false
          if (error.response.status === 404) {
            this.$message.error('删除失败，请重试！')
          }
        })
      }).catch(() => {})
    },
    // 判断是否有父级菜单
    checkParent (row) {
      if (row.p_functionno) {
        this.hadParent = true
        this.ruleForm.son_parentNo = row.p_functionno
        this.ruleForm.son_selfNo = row.functionno.slice(row.p_functionno.length)
        this.ruleForm.urlType = row.url_type
      } else {
        this.hadParent = false
        this.ruleForm.functionNo = row.functionno
      }
    },
    // 提交表单前获取数据
    getInputData () {
      if (this.hadParent) {
        this.fId = this.ruleForm.son_parentNo + this.ruleForm.son_selfNo
        this.pNo = this.ruleForm.son_parentNo
      } else {
        this.fId = this.ruleForm.functionNo
        this.pNo = ''
      }
      if (this.ruleForm.functionShow === '展示在菜单栏') {
        this.isShow = true
      } else {
        this.isShow = false
      }
    },
    // 提交编辑的方法
    submitEdit () {
      this.getInputData()
      this.formLoading = true
      this.$patch('/function/' + this.fId, {
        function_name: this.ruleForm.functionName,
        function_url: this.ruleForm.functionUrl,
        action: this.ruleForm.action,
        sortnum: this.ruleForm.sortnum,
        url_type: this.ruleForm.urlType,
        icon: this.ruleForm.icon,
        target: this.ruleForm.target,
        is_menu: this.isShow,
        p_function_no: this.pNo
      }).then((data) => {
        if (data.data.result.code === 'success') {
          this.dialogFormVisible = false
          this.$message({
            message: '编辑成功,请刷新页面,以更新左边菜单',
            type: 'success'
          })
          this.getTable()
          this.formLoading = false
        } else {
          this.formLoading = false
          this.$message.error(data.data.result.msg)
        }
      })
    },
    // 提交新增的方法
    submitAdd () {
      this.getInputData()
      this.formLoading = true
      this.$post('/function', {
        function_no: this.fId,
        function_name: this.ruleForm.functionName,
        function_url: this.ruleForm.functionUrl,
        action: this.ruleForm.action,
        sortnum: this.ruleForm.sortnum,
        url_type: this.ruleForm.urlType,
        icon: this.ruleForm.icon,
        target: this.ruleForm.target,
        is_menu: this.isShow,
        p_function_no: this.pNo
      }).then((data) => {
        if (data.data.result.code === 'success') {
          this.dialogFormVisible = false
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.getTable()
          this.formLoading = false
        } else {
          this.formLoading = false
          this.$message.error(data.data.result.msg)
        }
      })
    },
    // 点击弹窗的确定按钮
    submitForm (forms, submitType) {
      this.$refs[forms].validate((valid) => {
        if (valid) {
          if (submitType) {
            this.submitEdit()
          } else {
            this.submitAdd()
          }
        } else {
          return false
        }
      })
    },
    // 点击弹窗的取消按钮
    resetForm (forms) {
      // this.$refs[forms].resetFields()
      this.dialogFormVisible = false
    },
    closeDialog () {
      this.$refs.ruleForm.clearValidate()
    }
  },
  components: {
    VTitle
  }
}
</script>
